<template>
  <div>
    <el-row>
      <el-col :span="19" :push=push>
        <div class="main">
          <el-row>
            <el-col :span="5">
              <router-link to="/account/hcp">
                <div class="style ">HCP</div>
              </router-link>
            </el-col>
            <el-col :span="5">
              <router-link to="/account/hco">
                <div class="style">HCO</div>
              </router-link>
            </el-col>
            <el-col :span="5">
              <router-link to="/account/cluster">
                <div class="style stylek">CLUSTER</div>
              </router-link>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <router-view/>
  </div>
</template>

<script>
  import bus from '../bus';
  export default {
    data() {
      return {
        push: 5,
      }
    },
    created() {
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        if (msg == true) {
          this.push = 1
        }
        if (msg == false) {
          this.push = 5
        }
      })
    },
  }
</script>

<style scoped>
  .main {
    /*    padding: 0 50px;*/
    height: 55px;
  }
  .stylek {
    border-bottom: 5px solid #e85656 !important;
  }
  .style {
    border-bottom: 5px solid #fff;
    text-align: center;
  }
  .el-col > a {
    display: block;
    font-size: 23px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding-bottom: 4px;
  }
</style>
